<template>
  <el-aside width="220px" class="image-aside" v-loading="loading">
    <div class="top">
      <!-- <div v-for="i in 100" :key="i">
      {{ i }}
    </div> -->
      <!-- 编写每一项 -->
      <!-- 测试：这一项是激活 -->
      <!-- <AsideList active> 分类标题 </AsideList> -->
      <!-- 测试：这一项是未激活 -->
      <!-- <AsideList> 分类标题 </AsideList> -->
      <AsideList
        :active="activeId == item.id"
        v-for="(item, index) in list"
        :key="index"
        @edit="handleEdit(item)"
        @delete="handleDelete(item)"
        @click="handleClick(item.id)"
      >
        {{ item.name }}
      </AsideList>
    </div>
    <div class="bottom">
      <!-- 分页 -->
      <el-pagination
        background
        layout="prev, next"
        :total="total"
        :current-page="currentPage"
        :page-size="limit"
        @current-change="getData"
      />
    </div>
  </el-aside>
  <FormDrawer
    :title="title"
    direction="rtl"
    ref="FormDrawerRef"
    size="25%"
    @submit="handleSubmit"
  >
    <el-form
      :model="form"
      ref="formRef"
      :rules="rules"
      label-width="80px"
      :inline="false"
      class="w-[300px]"
    >
      <el-form-item label="分类名称" prop="name">
        <el-input v-model="form.name"></el-input>
      </el-form-item>
      <el-form-item label="排序" prop="order">
        <!-- <el-input v-model="form.order"></el-input> -->
        <el-input-number v-model="form.order" :min="0" :max="1000" />
      </el-form-item>
    </el-form>
  </FormDrawer>
</template>
<script setup>
import { computed, reactive, ref } from 'vue'
import {
  getImageClassList,
  createImageClass,
  updateImageClass,
  deleteImageClass
} from '@/api/image.js'
import AsideList from './AsideList.vue'
import FormDrawer from '../FormDrawer.vue'
import { toast } from '@/composables/util.js'

// 加载
const loading = ref(false)
const list = ref([])
// 默认激活
const activeId = ref()
const emit = defineEmits(['change'])
// 点击切换分类
const handleClick = item => {
  activeId.value = item
  emit('change', item)
}
// 分页
const currentPage = ref(1)
const total = ref(0)
const limit = ref(10)
// 获取数据
function getData (p = null) {
  if (typeof p == 'number') {
    currentPage.value = p
  }
  loading.value = true
  getImageClassList(currentPage.value)
    .then(res => {
      total.value = res.totalCount
      list.value = res.list
      let item = list.value[0] // 默认第一个激活
      if (item) {
        handleClick(item.id)
      }
    })
    .finally(() => {
      loading.value = false
    })
}
getData()

// 抽屉标题处理
const editId = ref(0)
const title = computed(() => (editId.value ? '编辑分类' : '新增分类'))

// 调用抽屉组件
const FormDrawerRef = ref(null) // 获取子组件的ref
// 打开抽屉
const openDrawer = () => {
  FormDrawerRef.value.open()
  // 清空表单
  form.name = ''
  form.order = 50
  // 处理判断
  editId.value = 0
}
// 表单对象
const form = reactive({
  // 名称
  name: '',
  // 排序
  order: 50
})
// 表单验证
const rules = reactive({
  name: [
    {
      required: true,
      message: '图库分类名称不能为空',
      tirgger: 'blur' //  表示表单元素失去焦点时触发验证
    }
  ]
})
// 提交
const formRef = ref(null)
const handleSubmit = () => {
  formRef.value.validate(valid => {
    // valid 参数是一个布尔值，表示验证是否通过
    if (!valid) return
    // 开启加载
    FormDrawerRef.value.showLoading()
    const fun = editId.value
      ? updateImageClass(editId.value, form)
      : createImageClass(form)
    fun
      .then(res => {
        // 提示信息
        toast('操作成功', title.value + '成功', 'success')
        // 更新列表
        getData(editId.value ? currentPage.value : 1)
        // 关闭抽屉
        FormDrawerRef.value.close()
      })
      .finally(() => {
        // 关闭加载
        FormDrawerRef.value.hideLoading()
      })
  })
}
// 处理编辑抽屉
const handleEdit = item => {
  editId.value = item.id
  form.name = item.name
  form.order = item.order
  FormDrawerRef.value.open()
}
// 处理删除
const handleDelete = item => {
  loading.value = true
  deleteImageClass(item.id)
    .then(() => {
      toast('操作成功', '删除成功', 'success')
      getData()
    })
    .finally(() => {
      loading.value = false
    })
}

defineExpose({
  openDrawer
})
</script>

<style>
.image-aside {
  border-right: 1px solid #eeeeee;
  position: relative;
}
.image-aside .top {
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  bottom: 50px;
  overflow-y: auto;
}
.image-aside .bottom {
  position: absolute;
  bottom: 0;
  height: 50px;
  left: 0;
  right: 0;
  @apply flex items-center justify-center;
}
</style>
